<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类选择器</title>
		<style>
			/* 伪类选择器：    语法：任意选择器：hover【悬停】  每个伪类选择器，具备特点、
			                  所有元素具备：hover    【常见伪类选择类】 
			*/
		   h1:hover{
			   color: #aa0000;
			   background: #ffaa7f;
		   }
		   /**
		    * 伪类选择器：     :link       链接时未点击状态
		    *                 :active     链接被点击状态
		    *                 :isited     链接点击后状态
		    *                 :hover      悬停链接时状态
		    * 主要结合在一起，针对a元素效果
		    */
		   a:link{  /*未访问状态*/
		   	color: #ffaa7f;
		   	/* 去掉超链接下划线 */
		   	text-decoration: none;
		   }
		   a:active{  /*被点击时状态*/
			   color: #55007f;
			   background: #00aaff;
		   }
		   a:visited{  /*点击后状态*/
		   			   color: #ff557f;
		   			   background: #aaffff;
		   }
		   a:hover{
			   font-size: 36px;
		   }
		/**
		 * 伪类选择器：  input：focus 获取焦点   鼠标点击输入框时效果
		 * 
		 * 针对  输入框  input元素
		 */
		input:focus{
			background: #aaffff;
		}
		/**
		 * 伪类选择器：    ：first-child    第一个儿子元素
		 *                ：last-child     最后一个儿子元素
		 *                ：ntthh-child(n) 匹配n个儿子元素
		 * 针对：父子级，默认父子级 table、列表
		 */
		li:first-child{
			background: #aa0000;
			color: #aaffff;
		}
		li:last-child{
			font-size: 15pt;
		}
		li:nth-child(2){
			background: #55007f;
			font-size: 15px;
		}
		li:nth-child(3){
			background: #55557f;
			font-size: 15px;
		}
		</style>
	</head>
	<body>
		<h1>鼠标悬停效果</h1>
		<a href="#">超链接</a>
		<input type="text" />
		<!-- 元素之间存在父子级关系，默认存在父子关系 -->
		<ol>
			<li>廊坊</li>
			<li>唐山</li>
			<li>承德</li>
			<li>邢台</li>
		</ol>
	</body>
</html>